<template>
  <div class="jsbos-common-layout" v-loading="loading">
    <div class="jsbos-common-layout-center">
      <div class="jsbos-common-layout-main jsbos-flex-main">
        <el-tabs v-model="activeName">
          <el-tab-pane label="消息模版" name="messageTemplate">
            <Form
              :fullName="this.fullName"
              :enCode="this.enCode"
              ref="Form"
              @close="closeForm"
              @saveConfig="saveToConfig"
            />
          </el-tab-pane>
          <el-tab-pane label="资源设置" name="serviceResources">
            <el-alert
              title="注意：该配置为设置系统资源阈值,达到该阈值会触发告警,每项只需要填写数字,单位系统默认"
              type="warning"
              :closable="false"
              show-icon
            />
            <ServiceResources ref="ServiceResourcesRef"></ServiceResources>
          </el-tab-pane>
          <el-tab-pane label="人员设置" name="userInfo">
            <UserRelationList ref="UserRelationListRef"></UserRelationList>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script>
import Form from "@/components/jsbos-message/Form.vue";
import UserRelationList from "./userRelation";
import ServiceResources from "./serviceResourcesForm";

import { getRoleList } from "@/api/permission/role";
import { saveByKeyName } from "@/api/system/sysConfig";
import request from "@/utils/request";

export default {
  components: {
    Form,
    UserRelationList,
    ServiceResources,
  },
  data() {
    return {
      activeName: "messageTemplate",
      loading: false,
      id: "",
      fullName: "服务器资源消息预警模版",
      enCode: "ServiceAlertMessageTemplate",
    };
  },
  watch: {
    activeName(val) {
      if (val === "userInfo") {
        this.$refs.UserRelationListRef.initData();
      }
      if (val === "serviceResources") {
        this.$refs.ServiceResourcesRef.initData();
      }
    },
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      let res = await this.getMessageTemplateByEncode(this.enCode);
      if (res.hasOwnProperty("data")) {
        this.id = res.data.id;
      }
      this.loading = false;
      this.$nextTick(() => {
        this.$refs.Form.init(this.id);
      });
    },
    //根据code获取模板
    getMessageTemplateByEncode(enCode) {
      return request({
        url: "/api/system/MessageTemplate/getMessageTemplateByEncode/" + enCode,
        method: "get",
      });
    },
    closeForm(isRefresh) {
      this.initData();
    },
    async saveToConfig() {
      let id = "1";
      let res = await this.getMessageTemplateByEncode(this.enCode);
      if (res.hasOwnProperty("data")) {
        id = res.data.id;
      }
      let formMessage = {
        enCode: this.enCode,
        keyValue: id,
        keyName: "ServiceAlertMessage",
        name: this.fullName,
        category: "ServiceAlertConfig",
      };
      saveByKeyName(formMessage).then((res) => {
        // this.$message.success(res.msg);
      });
    },
  },
};
</script>
